<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>汉字转拼音2.0版本</title>
    <style type="text/css">
        body {
            margin: 0;
            background-color:#999999;
        }
        input[type="file"] {
            position:absolute;left:20px;top:770px;
        }
    </style>
</head>
<body>
    <input type="file" onchange="readLocalFile(this)" />
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/minicomps.min.js"></script>
    <script src="../libs/pinyin_dict_all.js"></script>
    <script src="../libs/easeljs.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script>
        const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,Image,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown} = mc
        const width = Stage.width;
        const height = Stage.height;
        var canvasW=794;
        var canvasH=1123;
        var canvasX=(width-canvasW)-50;
        var tians=[];
        var fonts=[];
        var moonjs = new MoonJs();
        var sound;
        let url='https://ywx620.gitee.io/learn/rec/sound/hanzi/$num.mp3';

        const parent=document.body;

        createjs.Ticker.framerate = 30;
        var canvas=new Canvas(parent,canvasX,0,canvasW,canvasH);
        var stage=new createjs.Stage(canvas);
        createjs.Ticker.addEventListener("tick",(e)=>{stage.update();});

        var layerBg=new createjs.Container();
        var layerMid=new createjs.Container();
        var layerContent=new createjs.Container();
        stage.addChild(layerBg);
        stage.addChild(layerMid);
        stage.addChild(layerContent);

        var midColor='#ffffff'

        function onClear(){
            layerBg.removeAllChildren();
            layerMid.removeAllChildren();
            layerContent.removeAllChildren();
            slider.value=0;
        }
        function createFonts(){
            layerContent.removeAllChildren();

            let arr=[];
            for(let i=0;i<setInputs.length;i++){
                let value=setInputs[i].text;
                if(!isNaN(value)) value=Number(value);
                arr.push(value);
            }
            //'汉字字号,拼音字号,字体颜色,背景颜色,字体间距,拼汉间距,竖排间距,字体选择'
            let [hzSize,pySize,ztColor,bgColor,ztGap,hpGap,spGap,ztSelect]=arr;
            midColor=bgColor;
            //canvas.style.backgroundColor=bgColor;
            //console.log(arr);

            let fonts=textArea.text;
            let len=fonts.length;
            let [y,x]=[10,20];
            for(let i=0;i<len;i++){
                let hz=fonts[i];
                //console.log(hz=='\n');
                let py=pinyin_dict_all[hz]||' ';
                let pys=py.split(',');
                if(pys.length>1) py=pys[0];
                
                let txtPy=createFont(py,x,y,pySize,ztColor,'微软雅黑');
                let txtHz=createFont(hz,x,y+hpGap,hzSize,ztColor,ztSelect);
                txtPy.name=txtHz.name=py;
                txtPy.t2=txtHz;
                if(pys.length>1) txtPy.childs=pys;

                let wid=py.length*15;
                wid=countWidth(txtPy,wid+ztGap,ztGap);
                if(x>canvas.width-80||hz=='\n'){
                    x=20;
                    y+=spGap;
                }else{
                    x+=wid;
                }
               
                txtHz.x+=(wid-ztGap-hzSize)/2;
            }
        }
        function createFont(val,x,y,fontSize,fontColor,fontFamily='微软雅黑'){
            //console.log(fontSize,fontColor,fontFamily)
            let txt = new createjs.Text(val, `${fontSize}px ${fontFamily}`, fontColor);
            txt.addEventListener('click',onClick);
            [txt.x,txt.y]=[x,y];
            layerContent.addChild(txt);
            return txt;
        }
        function onClick(e){
            let t=e.target;
            let name=t.name;
            if(name==' ')return;
            if(t.childs&&t.childs.length>1){
                let n=t.childs.indexOf(t.name);
                n++;
                if(n==t.childs.length)n=0;
                let name=t.childs[n];
                t.text=name;
                t.t2.name=name;
                t.name=name;
            }
            if(t.t2) name=t.t2.name;
            let u=url.replace('$num',name);
            if(sound){
                sound.setUrl(u);
            }else{
                sound=moonjs.createSound(u);
            }
        }
        /**计算文字宽度*/
        function countWidth(txt,wid,ct=12){
            let c=0;
            if(txt.text==' ') return 20;
            for(let i=0;i<wid;i++){
                var boo=(txt.hitTest(i,2)||txt.hitTest(i,8)||txt.hitTest(i,14))
                if(boo)  c=0;
                else     c++;
                if(c==ct){
                    return i;
                }
            }
        }

        //---------------
        var hasMid=true;
        var gapy=300;
        let [x,y]=[20,20];
        let textArea=new MoonTextArea(parent,x,y,width-canvasW-100,gapy);
        new Button(parent,x,y+=gapy+5,'确定',createFonts);
        new Button(parent,x+110,y,'清空',onClear);
        let setNames=[['汉字字号',20],['拼音字号',14],['字体颜色',"#000000"],['中层颜色',"#FFFFFF"],['字体间距',12],['拼汉间距',20],['竖排间距',50],['字体选择','微软雅黑']]
        let setInputs=[];
        for(let i=0;i<setNames.length;i++){
            let [name,value]=setNames[i];
            y=gapy+60+i*30;
            let label=new LabelInput(parent,x,y,name);
            label.input.text=value;
            setInputs.push(label.input);
        }
        new Label(parent,x,y+=30,'颜色可以使用下面工具调色');
        new ColorPicker(parent,x,y+=20);

        let setName2s=[['场景宽度',794],['场景高度',1123]]
        let setInput2s=[];
        for(let i=0;i<setName2s.length;i++){
            let [name,value]=setName2s[i];
            y+=30;
            let label=new LabelInput(parent,x,y,name);
            label.input.text=value;
            setInput2s.push(label.input);
        }
        new Button(parent,x,y+=30,'修改场景宽高',()=>{canvas.width=setInput2s[0].text;canvas.height=setInput2s[1].text;}).setSize(80);
        new Button(parent,x+80,y,'下载本页',()=>Unify.saveCanvas(canvas._canvas)).setSize(80);
        var ddNames=[];
        for(let i=1;i<=4;i++) ddNames.push('背景水墨画'+i);
        for(let i=1;i<=4;i++) ddNames.push('背景为春天'+i);
        for(let i=1;i<=4;i++) ddNames.push('春天的插画'+i);
        for(let i=1;i<=4;i++) ddNames.push('背景为风景'+i);
        new Dropdown(parent,x,y+=30,ddNames,0,onChangeBgImage);

        new Label(parent,x,y+=60,'使用本地图片做为背景')

        let slider=new HSlider(parent,x,y+=50,'修改中间层的透明度',0,0,100,onSlider).setSize(160);

        function onSlider(e){
            let value=slider.value;
            layerMid.removeAllChildren();
            let rect=new createjs.Shape();
            midColor=setInputs[3].text;
            rect.graphics.f(midColor).dr(0,0,canvas.width,canvas.height);
            rect.alpha=value/100;
            layerMid.addChild(rect);
        }

        function onChangeBgImage(e){
            let index=Number(e.detail.index);
            console.log(index);
            layerBg.removeAllChildren();
            let url=`../rec/ai/shuimohua${index+1}.jpg`;
            if(index>=4) url=`../rec/ai/chuntian${index-3}.jpg`;
            if(index>=8) url=`../rec/ai/chahua${index-7}.jpg`;
            if(index>=12) url=`../rec/ai/fengjing${index-11}.jpg`;
            let bitmap = new createjs.Bitmap(url);
            layerBg.addChild(bitmap);
        }
        function readLocalFile(input) { 
            layerBg.removeAllChildren(); 
            if (window.FileReader) {  
                var file = input.files[0];  
                filename = file.name.split(".")[0];
                var reader = new FileReader(); 
                reader.onload = function() {  
                    //console.log(this.result);
                    let bitmap = new createjs.Bitmap(this.result);
                    setTimeout(()=>{
                        layerBg.addChild(bitmap);
                        let [w,h]=[bitmap.image.width,bitmap.image.height];
                        bitmap.x=canvas.width/2-w/2;
                        bitmap.y=canvas.height/2-h/2;
                    },100)
                }
                reader.readAsDataURL(file);//读取图片
            }
        }
    </script>
</body>

</html>